'use client';

import { useState } from 'react';

interface CategoryFormData {
  title: string;
}

interface Category {
  id: string;
  title: string;
}

export default function CategoryForm() {
  const [formData, setFormData] = useState<CategoryFormData>({
    title: '',
  });

  const [categories, setCategories] = useState<Category[]>([
    { id: '1', title: 'AI开发' },
    { id: '2', title: 'Web开发' },
    { id: '3', title: '数据分析' },
    { id: '4', title: '设计' },
    { id: '5', title: '写作' },
  ]);

  const [editingId, setEditingId] = useState<string | null>(null);
  const [editTitle, setEditTitle] = useState('');

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (formData.title.trim()) {
      const newCategory: Category = {
        id: Date.now().toString(),
        title: formData.title.trim(),
      };
      setCategories(prev => [...prev, newCategory]);
      setFormData({ title: '' });
    }
  };

  const handleEdit = (category: Category) => {
    setEditingId(category.id);
    setEditTitle(category.title);
  };

  const handleSaveEdit = (id: string) => {
    if (editTitle.trim()) {
      setCategories(prev => 
        prev.map(cat => 
          cat.id === id ? { ...cat, title: editTitle.trim() } : cat
        )
      );
      setEditingId(null);
      setEditTitle('');
    }
  };

  const handleCancelEdit = () => {
    setEditingId(null);
    setEditTitle('');
  };

  const handleDelete = (id: string) => {
    setCategories(prev => prev.filter(cat => cat.id !== id));
  };

  return (
    <div className="max-w-4xl mx-auto">
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
        <h2 className="text-2xl font-bold text-gray-900 mb-6">分类管理</h2>
        
        {/* 添加新分类表单 */}
        <div className="mb-8 p-6 bg-gray-50 rounded-lg">
          <h3 className="text-lg font-medium text-gray-900 mb-4">添加新分类</h3>
          <form onSubmit={handleSubmit} className="flex gap-4">
            <input
              type="text"
              name="title"
              value={formData.title}
              onChange={handleInputChange}
              placeholder="输入分类名称"
              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              required
            />
            <button
              type="submit"
              className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
            >
              添加分类
            </button>
          </form>
        </div>

        {/* 分类列表 */}
        <div>
          <h3 className="text-lg font-medium text-gray-900 mb-4">现有分类</h3>
          <div className="space-y-3">
            {categories.map((category) => (
              <div
                key={category.id}
                className="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
              >
                {editingId === category.id ? (
                  <div className="flex items-center gap-3 flex-1">
                    <input
                      type="text"
                      value={editTitle}
                      onChange={(e) => setEditTitle(e.target.value)}
                      className="flex-1 px-3 py-1 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      onKeyPress={(e) => e.key === 'Enter' && handleSaveEdit(category.id)}
                    />
                    <button
                      onClick={() => handleSaveEdit(category.id)}
                      className="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 transition-colors text-sm"
                    >
                      保存
                    </button>
                    <button
                      onClick={handleCancelEdit}
                      className="px-3 py-1 bg-gray-500 text-white rounded hover:bg-gray-600 transition-colors text-sm"
                    >
                      取消
                    </button>
                  </div>
                ) : (
                  <>
                    <span className="text-gray-900 font-medium">{category.title}</span>
                    <div className="flex items-center gap-2">
                      <button
                        onClick={() => handleEdit(category)}
                        className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors text-sm"
                      >
                        编辑
                      </button>
                      <button
                        onClick={() => handleDelete(category.id)}
                        className="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors text-sm"
                      >
                        删除
                      </button>
                    </div>
                  </>
                )}
              </div>
            ))}
          </div>

          {categories.length === 0 && (
            <div className="text-center py-8 text-gray-500">
              暂无分类，请添加第一个分类
            </div>
          )}
        </div>
      </div>
    </div>
  );
} 